<template>
  <div class="app-container">
    <div class="from">
      <div class="from-input">
        <span>部门名称</span>
        <el-input placeholder="请输入部门名称" v-model="input2"> </el-input>
      </div>
      
      <el-button type="primary" @click="Inquire">查询</el-button>
      <el-button type="primary" @click="reset">重置</el-button>
    </div>
    
     <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          @click="dialogFormVisible = true , isTrue = true"
          >新增</el-button
        >
    <el-dialog :title="isTrue ? '添加部门' : '修改部门'" :visible.sync="dialogFormVisible">
        <el-form :model="form">

             <div class="add-form">
            <el-form-item label="部门名称" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="部门人数" :label-width="formLabelWidth">
              <el-input v-model="form.number" autocomplete="off"></el-input>
            </el-form-item>
            
          </div>
           <div class="add-form">
            <el-form-item label="ID" :label-width="formLabelWidth">
              <el-input v-model="form.id" autocomplete="off"></el-input>
            </el-form-item>
            
          </div>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button
            v-if="isTrue==true"
            type="primary"
            @click="dialogFormVisible = false"
            v-on:click="addlist"
            >确 定</el-button>
          
           <el-button
            v-else
            type="primary"
            @click="dialogFormVisible = false"
            v-on:click="updatelist"
            >确 定</el-button>
          
        </div>
      </el-dialog>




 <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        fit
        highlight-current-row
      >
        <el-table-column label="ID" width="118.5">
          <template slot-scope="scope">
            {{ scope.row.id }}
          </template>
        </el-table-column>
        <el-table-column label="部门名称" width="285">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column label="部门人数" width="285">
          <template slot-scope="scope">
            {{ scope.row.number }}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="285">
          <template slot-scope="scope">
            {{ scope.row.createTime }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="285">
          <template slot-scope="scope">
            <el-button
              class="el-icon-edit-outline"
              size="mini"
              v-on:click="updateadd(scope.row)"
              type="text"
              @click="dialogFormVisible = true"
              >修改</el-button
            >
            <el-button
              class="el-icon-delete"
              size="mini"
              type="text"
              @click="deletelist(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pagination.limit"
        
        @current-change="handleCurrentChange"
        :current-page="page"
      >
      </el-pagination>

    
  </div>
</template>

<script>
import {getDepart,addDepart,deleteDepart,updateDepart} from "@/api/depart"
export default {
  data() {
    return {
      //分页
       pagination: {
        limit: 5,
        totalpage: "",
      },
      total: 0,
      page: 1,

      isTrue:true,
      radio:1,
      listLoading: false,
      isTrue:true,
      input2: "",
      list:[],
      value:'',
      dialogFormVisible:false,
      formLabelWidth: "120px",
     form: {
        id:'',
        name:'',
        number:''
      },

    };
  },
  created() {
    this.getDepart()
    
  },
  methods: {
     //分页监听器
    async handleCurrentChange(value) {
      this.page = value;
      this.getDepart();
    },
    //算页数
    getpage() {
      this.pagination.totalpage = Math.ceil(this.total / this.pagination.limit);
    },
    fetchData() {},
    useradd() {},

    async addlist(){
      let obj = {
        id:this.form.id,
        name:this.form.name,
        number:this.form.number
      }
    await addDepart(obj)
    await this.getDepart()
    this.$message({
        message: "新增成功",
        type: "success",
      });
     this.form={
        id:'',
        name:'',
        number:''
      }

    },
    updateadd(value){
      this.dialogFormVisible = true ,
       this.isTrue = false
       this.form = value;
    },

    updatelist(){
      let obj = {
        id:this.form.id,
        name:this.form.name,
        number:this.form.number
      }
       updateDepart(obj).then(res=>{
        this.getDepart()
        this.$message({
        message: "修改成功",
        type: "success",
      });
       })

    },
    //删除部门
    deletelist(id){
       this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let obj = {
            id: id,
          };
          deleteDepart(obj).then((res) => {
            this.getDepart();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //查询部门
   async Inquire(){
      let obj = {
        name: this.input2,
        limit: 5,
        page: 1,
      }
   let res= await getDepart(obj)
   this.list =res.data.records
   this.total = res.data.total
    this.getpage()
    this.page = 1

    },
    //重置
    reset(){
      this.input2 = ""
      this.getDepart()

    },    
   
  
     //获取列表
     getDepart() {
      let obj = {
        name:this.input2,
        limit: this.pagination.limit,
        page: this.page,
      };
       getDepart(obj).then(res=>{
          this.list = res.data.records
          this.total = res.data.total
           this.getpage()
      })
     
      
    },
  },
};
</script>
<style scoped>
.from-input .el-input {
  margin: 0 10px;
}
.from {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.from .el-input {
  width: 200px;
  height: 40px;
}
.from-input .el-select {
  margin: 0 10px;
}
.demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  .depart-item .el-select{
    width: 80%;

  }
  .add-form {
  display: flex;
}
</style>